<template>
    <div>
        <div style="margin: 20px 20px 10px 0; width: 30%">
            <el-input
                placeholder="请输入内容"
                v-model="input"
                class="input-with-select"
            >
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="账号" value="account"></el-option>
                    <el-option label="电话" value="phone"></el-option>
                    <el-option label="姓名" value="name"></el-option>
                    <el-option label="身份证号" value="IDCard"></el-option>
                </el-select>
                <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="serach"
                ></el-button>
            </el-input>
        </div>
        <el-table
            :data="tenantsData.pagerows"
            height="400"
            border
            style="width: 100%"
        >
            <!-- <el-table-column align="center" prop="_id" label="编号" width="150">
            </el-table-column> -->
            <el-table-column
                align="center"
                prop="account"
                label="账号"
                width="180"
            >
            </el-table-column>
<!-- 
            <el-table-column align="center" prop="password" label="密码">
            </el-table-column> -->
            <el-table-column align="center" prop="phone" label="电话号码">
            </el-table-column>
            <el-table-column align="center" prop="name" label="姓名">
            </el-table-column>
            <el-table-column align="center" prop="IDCard" label="身份证号">
            </el-table-column>
            <!-- <template slot-scope="scope">
                    {{ scope.row.classid.classname }}
                </template> -->

            <!-- <el-table-column label="状态" prop="state" align="center">
            </el-table-column> -->

            <el-table-column label="信用值" prop="credits" align="center">
                <!-- <template slot-scope="scope"> -->
                <!-- <el-image
                        style="width: 50px; height: 50px"
                        :src="
                            'http://localhost:3000/images/' +
                            (scope.row.imagename || 'default.jpg')
                        "
                        fit="contain"
                    ></el-image> -->
                <!-- </template> -->
            </el-table-column>

            <el-table-column align="center" width="100" label="状态">
                <template slot-scope="scope">
                    <div>
                        <span v-if="scope.row.state == 1">未认证</span>
                        <span v-if="scope.row.state == 2" style="background-color:green;color:white">已认证</span>
                        <span v-if="scope.row.state == 3">认证中</span>
                        <span v-if="scope.row.state == 4" style="background-color:red;color:white">认证失败</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="300">
                <template slot-scope="scope">
                    <el-button size="mini" @click="EditTenants(scope.row._id)"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row._id)"
                        >删除</el-button
                    >
                    <el-dropdown
                        v-if="
                            scope.row.state == 1 ||
                            scope.row.state == 2 ||
                            scope.row.state == 3 ||
                            scope.row.state == 4
                        "
                    >
                        <el-button type="primary">
                            选择
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                                ><button
                                    @click="
                                        changestate(scope.row._id, (value = 1))
                                    "
                                >
                                    未认证
                                </button></el-dropdown-item
                            >
                            <el-dropdown-item
                                ><button
                                    @click="
                                        changestate(scope.row._id, (value = 2))
                                    "
                                >
                                    认证成功
                                </button></el-dropdown-item
                            >
                            <el-dropdown-item
                                ><button
                                    @click="
                                        changestate(scope.row._id, (value = 3))
                                    "
                                >
                                    认证中
                                </button></el-dropdown-item
                            >
                            <el-dropdown-item
                                ><button
                                    @click="
                                        changestate(scope.row._id, (value = 4))
                                    "
                                >
                                    认证失败
                                </button></el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tenants.currentPage"
            :page-sizes="[3, 4, 5, 6]"
            :page-size="3"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tenantsData.totalitem"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
    "admins"
);

export default {
    data() {
        return {
            input: "",
            select: "account",
            isSort: false,
        };
    },
    watch: {
        "tenants.pageSize"() {
            this.getTenants();
        },
        "tenants.currentPage"() {
            this.getTenants();
        },
        "tenants.value"() {
            this.getTenants();
        },
    },
    mounted() {
        this.getTenants();
    },
    computed: {
        ...mapState(["tenants", "tenantsData"]),
    },
    methods: {
        ...mapActions(["getTenants", "modifyTenants", "deleteTenants"]),
        ...mapMutations([
            "changeCurrentPaget",
            "changeValuet",
            "changePageSizet",
        ]),
        //更新租客否认证成功
        async changestate(id, value) {
            const result = await this.modifyTenants({ _id: id, state: value });
            console.log(result,"租客的结果")
            if (result.status) {
                this.getTenants();
            } else {
                alert("操作失败");
            }
        },

        //编辑租客
        EditTenants(val) {
            this.$router.push("/system/edittenants/" + val);
        },
        //搜索
        serach() {
            this.tenants.type = this.select;
            this.tenants.value = this.input;
        },
        handleSizeChange(val) {
            this.changePageSizet(val);
        },
        handleCurrentChange(val) {
            this.changeCurrentPaget(val);
        },
        // handleEdit(index, row) {
        //     this.$router.push(`/studentinfo/updatastudent/${row._id}`);
        // },
        //刪除出租方信息
        async handleDelete(index, row) {
            console.log(this.tenantsData);
            const result = await this.deleteTenants(row);
            if (result.status) {
                if (this.tenantsData.pagerows.length <= 1) {
                    this.tenants.currentPage--;
                }
                this.getTenants();
            } else {
                alert("刪除失敗");
            }
        },
        // query() {
        //     this.getstudent();
        // },
        // change(id) {
        //     this.$router.push(`/system/upd/${id}`);
        // },
    },
};
</script>

<style scoped>
.el-dropdown {
    vertical-align: top;
    margin-left: 10px;
}
.el-dropdown + .el-dropdown {
    margin-left: 15px;
    line-height: 30px;
}
.el-select {
    width: 80px;
}
.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
table {
    width: 98%;
    height: 98%;
    margin: 0 auto;
    margin-top: 15px;
    text-align: center;
    border-collapse: collapse;
}
tr {
    height: 40px;
}
select {
    margin-top: 20px;
}
#buttons {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    height: 60px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
button {
    height: 30px;
    width: 80px;
}
.el-pagination {
    text-align: center;
    margin-top: 10px;
}
</style>